import React, { PureComponent } from 'react';
import './index.css'
/* 上述代码如果不使用PureComponent，由于父组件每次state更新都会render，同时调用子组件的
render,即使子组件的props没有改变。合理的情况应该是只有组件props与state更新才会调用组件
自身的render。
  使用PureComponent则会保证只有组件props与state更新时才调用组件自身render

。。。。运行效果见react-app->src->Component->PureComponent
*/
export default class Parent extends PureComponent {
  state = { car:'宝马' }
  render() {
    const {car} = this.state
    console.log('父组件render');
    return (
      <div className='parent'>
        <h1>父组件{car}</h1>
        <button onClick={()=>this.setState({car:car==='奔驰'?'宝马':'奔驰'})}>换车</button>
        <Child car='A系列' />
      </div> 
    )
  }
}
class Child extends PureComponent {
  render() {
    const {car} = this.props
    console.log('子组件render');
    return (
      <div className='child'>
        <h1>子组件{car}</h1>
      </div> 
    )
  }
}
